<template>
	<view class="index home-bg img-main">
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="false">
			<u-navbar :border-bottom="false" :is-fixed="false" custom-class="home-bg" :background="{ background: 'transparent' }" :is-back="false">
				<view style="display: flex; justify-content: space-between; width: 100%; align-items: center; margin-right: 30rpx">
					<h3 style="display: flex; align-items: center">
						<image src="/static/main/main.png" style="width: 35rpx; height: 35rpx; margin-right: 10rpx"></image>
						鼎顶易购
					</h3>

					<view class="user-opt" @tap="goPage('/bundle/pages/message_center/message_center')">
						<view :class="isNotice ? 'redNotice' : ''"></view>
						<image style="width: 28rpx; height: 28rpx" src="/static/images/icon_my_news.png"></image>
					</view>
				</view>
			</u-navbar>
		</u-sticky>

		<view class="Search-u" @click="tapSearch()">
			<Search pageTitle="搜索" placeholder="搜索商品店铺名称" color="#F05A39" @search="searchStore" @clear="clear"></Search>
		</view>

		<view v-if="isSearch" class="bottom-color" style="background: transparent">
			<view v-if="hotGoods.length">
				<view v-for="(item, index) in hotGoods">
					<view class="hotGoods" @click="goodsUrl(item.id)">
						<view style="display: flex">
							<image :src="path + item.goodImg.split(',')[0]" mode="aspectFill"></image>
							<view class="right">
								<view>
									<text class="right-top">{{ item.goodName }}</text>
									<view style="margin-top: 10rpx">
										<u-rate :value="item.goodStars" disabled></u-rate>
									</view>
								</view>
								<view class="right-bottom">
									<text>
										<span>￥</span>
										{{ item.todayPrice }}
									</text>
								</view>
							</view>
						</view>
						<button>购买</button>
					</view>
				</view>
			</view>

			<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>
		</view>

		<view v-else>
			<view class="list-swiper">
				<u-swiper height="296" name="img" :list="list3" indicatorMode="line" circular></u-swiper>
			</view>

			<x-swiper-nav :navList="navList" :navListLoading="navListLoading"></x-swiper-nav>

			<view class="programme">
				<view class="flex align-center flex-between" style="margin: 0 30rpx">
					<view class="name">津贴专区</view>
					<text @click="tapSearch(2)">
						查看更多
						<u-icon name="arrow-right" size="20" style="margin-left: 7rpx"></u-icon>
					</text>
				</view>
				<ProductList :productList="randomItems" backColor="transparent"></ProductList>
			</view>

			<view class="programme">
				<view class="flex align-center flex-between" style="margin: 0 30rpx">
					<view class="name">提货专区</view>
					<text @click="tapSearch(1)">
						查看更多
						<u-icon name="arrow-right" size="20" style="margin-left: 7rpx"></u-icon>
					</text>
				</view>
				<ProductList :productList="hotGoods" backColor="transparent"></ProductList>
			</view>

			<!-- <view class="hot mt20 bottom-color">
				<view class="title flex1 disp">
					<view class="name">提货专区</view>
					<span>开心购物·尽在优选</span>
				</view>
				<view v-if="hotGoods.length">
					<view v-for="(item, index) in hotGoods">
						<view class="hotGoods" @click="goodsUrl(item.id)">
							<view style="display: flex">
								<image class="img-axGood" :src="path + item.goodImg.split(',')[0]" mode="aspectFill"></image>
								<view class="right">
									<view>
										<view class="flex" style="position: relative">
											<text class="right-top">{{ item.goodName }}</text>
											<view class="rxsp-img" v-if="item.goodType == 1">
												<image src="/static/main/rxsp.png"></image>
											</view>
										</view>
										<view style="margin-top: 10rpx">
											<u-rate :value="item.goodStars" disabled></u-rate>
										</view>
									</view>
									<view class="right-bottom">
										<text>
											<span>￥</span>
											{{ item.todayPrice }}
										</text>
									</view>
								</view>
							</view>
							<button>购买</button>
						</view>
					</view>
				</view>

				<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>
			</view> -->
		</view>

		<loadMore :currentLength="hotGoods.length" :total="total" :pageSize="pageSize" @load-list="getFriendsPage()" ref="loadArray" @load-add="pageNum++"></loadMore>

		<u-back-top
			:scroll-top="scrollTop"
			:top="1000"
			:customStyle="{
				backgroundColor: '#FFF',
				color: '#000',
				boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
			}"
		></u-back-top>

		<u-modal v-model="show" confirm-text="我知道了" :title="natssTitl" @confirm="confirm">
			<view class="u-update-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
import Cache from '@/utils/cache';
import Search from '@/components/you-search/index.vue';
import { setTabbar } from '@/utils/tools.js';
import main from '@/api/main.js';
import api from '@/api/index.js';
import { getBotTime, getCountTime, setSellTime } from '@/utils/utils.js';
import loadMore from '@/components/load-more/load-more.vue';
import ProductList from '@/components/produc-list/index.vue';
const app = getApp();

export default {
	components: {
		Search,
		loadMore,
		ProductList
	},
	data() {
		return {
			show: false,
			natssTitl: '',
			// 传递给uni-app"rich-text"组件的内容，可以使用"<br>"进行换行
			content: '',
			botTime: 2, //0结束，1即将售卖时间，2预售时间，3售卖中
			list3: [],
			scrollTop: 0, //回到顶部
			page: 1,
			navList: [],
			hotGoods: [],
			enable: true,
			path: api.getPath(),
			pageNum: 1,
			pageSize: 10,
			total: 0,
			navListLoading: false,
			searchName: '',
			isSearch: false,
			countTime: 0,
			isNotice: true,

			randomItems: []
		};
	},
	onLoad(options) {
		if (options.isNotice) {
			this.show = true;
		}
	},
	onShow() {
		this.pageNum = 1;
		this.total = 0;
		this.getAxbanner();
		this.getLsit();
		this.getArray();
		//查询消息
		this.getNotice();
		//津贴
		this.getSubsidyByArray();
	},

	onHide() {
		setTabbar();
		// #ifdef H5
		this.enable = false;
		// #endif
	},
	onPageScroll(e) {
		const top = uni.upx2px(100);
		const { scrollTop } = e;
		if (!this.enable) return;
		let percent = scrollTop / top;
		this.navBg = percent > 1 ? 1 : percent;
		this.scrollTop = scrollTop;
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},
	onPullDownRefresh() {
		// 重置页码
		this.pageNum = 1;

		//重新获取数据
		Promise.all([this.getAxbanner(), this.getLsit(), this.getArray(), this.getSubsidyByArray()]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		//随机取值
		refreshRandomItems() {
			this.randomItems = this.getRandomItems(4);
		},
		getRandomItems(count) {
			if (this.randomItems.length <= count) {
				return [...this.randomItems];
			}

			const copy = [...this.randomItems];
			const result = [];

			for (let i = 0; i < count; i++) {
				const randomIndex = Math.floor(Math.random() * copy.length);
				result.push(copy[randomIndex]);
				copy.splice(randomIndex, 1);
			}

			return result;
		},

		getNotice() {
			main.getNotice({}).then((res) => {
				const data = res.rows[0];
				this.natssTitl = data.noticeTitle;
				this.content = data.noticeContent;
				const userId = uni.getStorageSync('user').userId + '';
				const number = uni.getStorageSync(userId) || 0;
				if (number != res.total) {
					uni.setStorageSync(userId, res.total);
					this.isNotice = true;
				}
			});
		},
		setSellTime(endYmd) {
			return setSellTime(endYmd);
		},
		getBotTime(item) {
			const bTime = getBotTime(item);
			if (bTime == 1 && !this.countTime) {
				this.countTime = getCountTime(item);
			}
			return bTime;
		},
		tapSearch(id) {
			let url = '/pages/index/indexSearch';
			if (id) {
				url = '/pages/index/indexSearch?goodType=' + id;
			}
			uni.navigateTo({
				url: url
			});
		},
		goPage(url) {
			this.isNotice = false;
			uni.navigateTo({
				url
			});
		},
		goodsUrl(id) {
			uni.navigateTo({
				url: '/pages/goods_details/goods_details?id=' + id
			});
		},
		getAxbanner() {
			let _this = this;
			main.getAxbanner({
				pageNum: 1,
				pageSize: 4,
				platform: 'B'
			})
				.then((res) => {
					this.list3 = res.rows.map((item) => {
						item.img = _this.path + item.img;
						return item;
					});
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		// 将一维数组分割为二维数组
		splitArray(arr, size) {
			const pages = [];
			for (let i = 0; i < arr.length; i += size) {
				pages.push(arr.slice(i, i + size));
			}
			return pages;
		},
		getLsit() {
			let _this = this;
			main.getList({
				pageNum: 1,
				pageSize: 100
			})
				.then((res) => {
					_this.navList = _this.splitArray(res.rows, 8);
					_this.navListLoading = true;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getArray() {
			let _this = this;
			main.getGood({
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				goodName: _this.searchName,
				goodType: 1
			})
				.then((res) => {
					_this.hotGoods = res.rows;
					this.refreshRandomItems(4);
					_this.total = res.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getSubsidyByArray() {
			let _this = this;
			main.getSubsidyByArray({
				pageNum: 1,
				pageSize: 10,
				goodType: 2
			})
				.then((res) => {
					_this.randomItems = res.rows;
					this.refreshRandomItems(4);
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getFriendsPage() {
			let _this = this;
			main.getGood({
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				goodName: _this.searchName,
				goodType: 1
			})
				.then((res) => {
					_this.hotGoods = [..._this.hotGoods, ...res.rows];
					_this.total = data.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
			return _this.hotGoods.length;
		},
		clear() {
			this.searchName = '';
			this.getArray();
			this.isSearch = false;
		},
		searchStore(searchValue) {
			if (!searchValue) {
				return;
			}
			this.searchName = searchValue;
			this.getArray();
			this.isSearch = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.programme {
	background-color: #fff5ec;
	margin: 30rpx;
	padding: 30rpx 0;
	border-radius: 20rpx;
}
.name {
	font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
	font-weight: 400;
	font-size: 34rpx;
	color: #774518;
	text-align: center;
	font-style: normal;
	text-transform: none;
	font-weight: bold;
}

.user-opt {
	position: relative;
}
.redNotice {
	position: absolute;
	right: 0;
	top: -7rpx;
	width: 15rpx;
	height: 15rpx;
	border-radius: 10rpx;
	background-color: red;
}

.u-update-content {
	font-size: 26rpx;
	color: $u-content-color;
	line-height: 1.7;
	padding: 30rpx;
}

.timeClass {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112rpx;
	height: 36rpx;
	background: #fff8f6;
	border-radius: 35rpx 35rpx 35rpx 35rpx;
	font-size: 20rpx;
	color: #f05a39;
	position: absolute;
	left: 450rpx;
	image {
		margin-right: 7rpx;
	}
}

.img-main {
	background: url('@/static/main/Frame1.png') no-repeat;
	background-size: 100% auto;
}
.Search-u {
	margin: 0 0 20rpx 0;
}
.list-swiper {
	height: 296rpx;
	margin: 16rpx 0;
}
.bottom-color {
	min-height: 48vh;
	background: linear-gradient(180deg, #ffe0d9 0%, rgba(255, 255, 255, 0.24) 26%, #ffffff 44%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 20rpx 30rpx;
	.hotGoods {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0 35rpx 0;
		.img-axGood {
			width: 240rpx;
			height: 149.29rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin-right: 20rpx;
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 5rpx 0;
			.right-top {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				width: 250rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1; /* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.right-bottom {
				display: flex;
				align-items: center;
				text {
					font-family: MiSans, MiSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #f05a39;
					text-align: center;
					font-style: normal;
					text-transform: none;
					span {
						font-size: 23rpx;
					}
				}
				.right-time {
					position: absolute;
					left: 420rpx;
					margin-left: 15rpx;
					padding-right: 20rpx;
					width: 150rpx;
					height: 35rpx;
					background: url(../../static/main/time.png) no-repeat;
					background-size: 144.71rpx 34rpx;
					display: flex;
					align-items: center;
					justify-content: end;
				}
			}
		}

		button {
			width: 110rpx;
			height: 62rpx;
			background: linear-gradient(269deg, #f26f43 0%, #f34836 100%);
			border-radius: 166rpx 166rpx 166rpx 166rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
	.disp {
		display: flex;
		align-items: center;
		span {
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #f05a39;
		}
	}
}

.index {
	.live-play {
		position: fixed;
		z-index: 999;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		border: $-solid-border;
		border-radius: 50%;
		font-size: 32rpx;
		background-color: #ffffff;

		&__icon {
			animation: scale 0.5s infinite;
		}

		@keyframes scale {
			from {
				top: 0px;
				transform: scale(1);
			}
			to {
				transform: scale(1.2);
			}
		}
	}

	background-size: 100% auto;

	.logo-wrap {
		position: absolute;

		.logo {
			width: auto;
			height: 52rpx;
		}
	}
}
</style>
